<template>
	<view class="content">
		<Header>
			我的履职
		</Header>
		<view class="grid">
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/my/proposal')">
						<image src="https://zhzx.on-line-demo.com/image/bg-tagz.png" mode="widthFix" class="bg"></image>
						<view class="text">
							提案工作
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/my/opinion')">
						<image src="https://zhzx.on-line-demo.com/image/bg-sqmy.png" mode="widthFix" class="bg"></image>
						<view class="text">
							社情民意
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/my/survey')">
						<image src="https://zhzx.on-line-demo.com/image/bg-dykc.png" mode="widthFix" class="bg"></image>
						<view class="text">
							调研考察
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/train/index')">
						<image src="https://zhzx.on-line-demo.com/image/bg-xxpx.png" mode="widthFix" class="bg"></image>
						<view class="text">
							政协培训
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/my/meeting')">
						<image src="https://zhzx.on-line-demo.com/image/bg-hyhd.png" mode="widthFix" class="bg"></image>
						<view class="text">
							会议活动
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item-content" @click="toPage('/pages/my/speak')">
						<image src="https://zhzx.on-line-demo.com/image/bg-dhfy.png" mode="widthFix" class="bg"></image>
						<view class="text">
							大会发言
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view class="report" style="width: 100%;">
				<view class="item-content" @click="toPage('/pages/my/report')">
					<image src="https://zhzx.on-line-demo.com/image/bg-lzbg.png" mode="widthFix" class="bg"></image>
					<view class="text">
						个人年度履职报告
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'

	export default {
		components: {
			Header,
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	.grid {
		margin: 20px 10px;
	}

	.item-content {
		position: relative;
		margin: 6px;
	}

	.item-content .bg {
		width: 100%;
		height: auto;
	}

	.item-content .text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
	}

	.report .text {
		left: 30%;
	}
</style>